<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	
	
	
	function getXMLHttp() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
			// Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlhttp;
	}
	function changeDay(element){
		var mealNum = document.getElementById("mealNum").value;
		var dayNum = document.getElementById("dayNum").value;
		var day = element.value;
		var id = document.getElementById("menuId").value;
		
		window.location.href = "MenuClientServlet?id=" + id + "&day=" + day +  "&mealNum="+ mealNum + "&dayNum=" + dayNum;
		
	}
	function checkUser(){
		var user = document.getElementById("sessionUser").value;
		if (user==""){
			return false;	
		} else {
			return true;
		}
	}
	function startMenu() {
		if (!checkUser()) {
			window.location.href = "user-login.jsp";			
		} else {
			var xmlhttp = getXMLHttp();
			
			xmlhttp.open("POST", "UserServlet", true);
			xmlhttp.setRequestHeader('Content-Type',
					'application/x-www-form-urlencoded');
			var menuId = document.getElementById("menuId").value;
			xmlhttp.send("action=startMenu&menuId=" + menuId);
			
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					if (xmlhttp.responseText == "success") {
						window.alert("Menu is added to your favouries and start!");
					}	else {
						window.alert("Some error occur! Menu can not start!");
					}
				}
			};
		}
	}
	
	function addFavouries() {
		if (!checkUser()) {
			window.location.href = "user-login.jsp";		
		}else {
			var xmlhttp = getXMLHttp();
			
			xmlhttp.open("POST", "UserServlet", true);
			xmlhttp.setRequestHeader('Content-Type',
					'application/x-www-form-urlencoded');
			var menuId = document.getElementById("menuId").value;
			xmlhttp.send("action=addFavouries&menuId=" + menuId);
			
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					if (xmlhttp.responseText == "success") {
						window.alert("Menu is added to your favouries!");
					}	else {
						window.alert("Some error occur! Menu is not added to your favouries!");
					}
				}
			};
		}
	}
	
	
	function downloadMenu(){
		var id = document.getElementById("menuId").value;
		window.open(
		  'DownloadServlet?item=menu&id=' + id,
		  '_blank' // <- This is what makes it open in a new window.
		);
	}
</script>
<title>Menu details</title>
</head>
<body>
<jsp:include page="top-nav-bar.jsp"/>
	<input type="hidden" id="sessionUser" value="${sessionScope.USER_USERNAME}"/>
	<div class="container">
		<div class="header">
			<img class="header-image" src="img/header-image.png" alt="Cherry"
				name="header_image" id="header_image" />
		</div>
		<!-- end .header -->

		<div class="main-navigation">
			<c:import url="WEB-INF/xml/diet.xml" var="xmlDietDoc" />
			<c:import url="style-sheet/diet.xsl" var="xslDietDoc" />
			<x:transform xml="${xmlDietDoc}" xslt="${xslDietDoc}" />

			<c:import url="WEB-INF/xml/recipe.xml" var="xmlRecipeDoc" />
			<c:import url="style-sheet/recipe.xsl" var="xslRecipeDoc" />
			<x:transform xml="${xmlRecipeDoc}" xslt="${xslRecipeDoc}" />
		</div>

		<c:set var="id" value="${param.id}" />
		<div class="content">
			<c:import var="xmlMenu" url="WEB-INF/xml/menu.xml" />
			<x:parse var="doc" xml="${xmlMenu}" scope="page" />
			<x:set var="menu" select="$doc//Menu[@id=$id]" />
			<c:catch var="ex">
				<div class="menu-category">
					<h3>
						<x:out select="$menu/name" />
					</h3>
				</div>
				<a href="#" onclick="downloadMenu()">Download this Menu</a><br/>
				<div class="menu-container">
					<div class="menu-image-content">
						<img src="<x:out select="$menu/imgPath"/>" width="100%">
					</div>
					<div class="menu-des-content">
						<p>
							<x:out select="$menu/description" />
						</p>
					</div>
					<div>
						<input id="menuId" type="hidden" value="${param.id}"/>
						<input id="mealNum" type="hidden" value="${param.mealNum}"/>
						<input id="dayNum" type="hidden" value="${param.dayNum}"/>
						<input id="menuId" type="hidden" value="${id}"/>
						<input type="button" value="startMenu" onclick="startMenu()"/>
						<input type="button" value="addFavouries" onclick="addFavouries()"/>
					</div>
				</div>
				<h2 class="line"></h2>
			</c:catch>
			<c:if test="${not empty ex}">
				<font color="red"> Error occur: ${ex} </font>
			</c:if>
		</div>
		
		Days
		<select name="day" onchange="changeDay(this)">
			<c:forEach var="i" begin="1" end="${DAYNUM}">
				<c:if test="${i==param.day}">
					<option value="${i}" selected="selected">${i}</option>
				</c:if>
				<c:if test="${i!=param.day}">
					<option value="${i}">${i}</option>
				</c:if>
				
				
			</c:forEach>
		</select>
		<br/>
		<h2 class="line"></h2>
		<br/>
		<c:forEach var="meal" items="${MEALLIST}" varStatus="counter">
			<h2>Meal : ${counter.count} <br/></h2>
			<c:forEach var="dish" items="${meal.dishList}">
				Dish : ${dish.name} <br/>
				How to cook : ${dish.cooking} <br/>
				Calo: ${dish.calo} <br/>
				<img src="${dish.imgPath}"/> <br/>
				<br/>
				<br/>
				<br/>
			</c:forEach>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
		</c:forEach>
	</div>
</body>
</html>